<template>
  <div class="form-box">
    <el-button
      type="warning"
      icon="el-icon-plus"
      @click="addEdit('add')"
      style="margin-bottom:10px"
    >
      添加banner图
    </el-button>
    <el-table :data="itemInfo.tableData">
      <el-table-column label="序号" type="index" width="80" align="center">
      </el-table-column>
      <el-table-column
        prop="picturName"
        label="名称"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column label="图片" min-width="100" align="center">
        <template slot-scope="{ row }">
          <listImgString :imgInfo="row.bannerImg"></listImgString>
        </template>
      </el-table-column>
      <el-table-column
        label="图片功能"
        min-width="100"
        align="center"
        :formatter="formatter"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="updateTime"
        label="最后修改时间"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="userName"
        label="操作人"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column label="操作" min-width="120" align="center">
        <template slot-scope="{ row }">
          <el-button type="text" @click="addEdit('edit', row)">
            编辑
          </el-button>
          <el-button type="text" @click="delBannerImg(row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <bannerDialog
      v-if="dialogData.isShow"
      :dialogData="dialogData"
      @updatelist="updatelist"
    ></bannerDialog>
  </div>
</template>
<script>
import bannerDialog from './bannerDialog'
import listImgString from '@common/listImgString' // 视图预览(返回值为字符串结构)-公共组件
export default {
  props: ['itemInfo'],
  components: { bannerDialog, listImgString },
  data() {
    return { dialogData: { isShow: false } }
  },
  mounted() {},
  methods: {
    /* 新增编辑banner图 */
    addEdit(type, row) {
      const { tableData } = this.itemInfo
      const obj = Object.assign({}, row)
      if (type === 'add') this.dialogData = { isShow: true, type, tableData }
      else this.dialogData = { isShow: true, tableData, obj }
    },
    /* 更新列表 */
    updatelist(val) {
      const { tableData } = this.itemInfo
      if (!tableData.length) {
        this.itemInfo.tableData.push(val)
      } else {
        let rowIndex = -1
        this.itemInfo.tableData.forEach((item, index) => {
          if (item.id === val.id) rowIndex = index
        })
        if (rowIndex !== -1) this.$set(this.itemInfo.tableData, rowIndex, val)
        else this.itemInfo.tableData.push(val)
      }
    },
    /* 格式化 */
    formatter(row) {
      switch (row.actionType) {
        case '':
          return '无'
        case 'LINK':
          return row.link
        case 'DIALOG':
          return '唤起注册弹窗'
      }
    },
    /* 删除banner图片 */
    delBannerImg({ id }) {
      this.$confirm('确定要删除banner图吗', '删除banner图', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const res = this.itemInfo.tableData.filter((item) => item.id !== id)
          this.itemInfo.tableData = res
        })
        .catch(() => {})
    },
    /* 收集数据 */
    collectData() {
      return this.itemInfo.tableData.length ? this.itemInfo : false
    }
  }
}
</script>
<style lang="less" scoped></style>
